@import "variables.less";

.header {
  display: block;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: @header-height;
  line-height: @header-height;
  padding-top: @header-padding-top;
  text-align: center;
  font-size: @header-font-size;
  color: black;
  // background: -webkit-gradient(linear, left top, right top, from(#f4d336), to(#e96d36));
  // background: -webkit-linear-gradient(left, #f4d336, #e96d36);
  // background: -moz-linear-gradient(left, #f4d336, #e96d36);
  // background: -ms-linear-gradient(left, #f4d336, #e96d36);
  // background: -o-linear-gradient(left, #f4d336, #e96d36);
  // background: -webkit-gradient(linear, left top, right top, from(#e96d36), to(#f4d336));
  // background: -webkit-linear-gradient(left, #e96d36, #f4d336);
  // background: -moz-linear-gradient(left, #e96d36, #f4d336);
  // background: -ms-linear-gradient(left, #e96d36, #f4d336);
  // background: -o-linear-gradient(left, #e96d36, #f4d336);
  // background: -webkit-gradient(linear, left top, left bottom, from(#f4d336), to(#e96d36));
  // background: -webkit-linear-gradient(top, #f4d336, #e96d36);
  // background: -moz-linear-gradient(top, #f4d336, #e96d36);
  // background: -ms-linear-gradient(top, #f4d336, #e96d36);
  // background: -o-linear-gradient(top, #f4d336, #e96d36);
  background:white;
  overflow: hidden;
  > .title {
    text-align: center;
  }
}

.back {
  display: inline-block;
  position: absolute;
  width: 50px;
  height: 45px;
  top: (@header-height - 45px)/2 + @header-padding-top;
  left: 10px;
  background-size: 12px 17px;
  background-position: left;
  background-repeat: no-repeat;
  &.big {
    background-image: url(../image/big/btn_back.png);
  }
  &.small {
    background-image: url(../image/small/btn_back.png);
  }
}

.getback {
  display: inline-block;
  position: absolute;
  width: 50px;
  height: 45px;
  top: (@header-height - 45px)/2 + @header-padding-top;
  left: 10px;
  background-size: 12px 17px;
  background-position: left;
  background-repeat: no-repeat;
  &.big {
    background-image: url(../image/big/btn_getback.png);
  }
  &.small {
    background-image: url(../image/small/btn_getback.png);
  }
}

.BSImg-active(@BImg, @active-BImg, @SImg, @active-SImg) {
  &.big {
    background-image: url(@BImg);
    &.active {
      background-image: url(@active-BImg);
    }
  }
  &.small {
    background-image: url(@SImg);
    &.active {
      background-image: url(@active-SImg);
    }
  }
}

.footer {
  background-color: #ffffff;
  ul {
    li {
      padding-top: 30px;
      padding-bottom: 4px;
      background-size: auto 30px;
      background-repeat: no-repeat;
      background-position: center 1px;
      text-align: center;
      font-size: 12px;
      color: #666666;
      &.active {
        color: #9D0152;
      }
      &:nth-child(1) {
        .BSImg-active("../image/big/footer_btn_home.png", "../image/big/footer_btn_home2.png",
                "../image/small/footer_btn_home.png", "../image/small/footer_btn_home2.png");
      }
      &:nth-child(2) {

        .BSImg-active("../image/big/footer_btn_seckill.png", "../image/big/footer_btn_seckill2.png",
                "../image/small/footer_btn_seckill.png", "../image/small/footer_btn_seckill2.png");
      }
      &:nth-child(3) {
        .BSImg-active("../image/big/footer_btn_myshop.png", "../image/big/footer_btn_myshop2.png",
                "../image/small/footer_btn_myshop.png", "../image/small/footer_btn_myshop2.png");
      }
      &:nth-child(4) {
        .BSImg-active("../image/big/footer_btn_share.png", "../image/big/footer_btn_share2.png",
                "../image/small/footer_btn_share.png", "../image/small/footer_btn_share2.png");
      }
      &:nth-child(5) {
        .BSImg-active("../image/big/footer_btn_user.png", "../image/big/footer_btn_user2.png",
                "../image/small/footer_btn_user.png", "../image/small/footer_btn_user2.png");
      }
    }
  }
}

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.main-container {
  .container;
  padding-top: @header-height + @header-padding-top;
  padding-bottom: @footer-height;
}

.bottom-container {
  .container;
  padding-bottom: @footer-height;
}

.top-container {
  .container;
  padding-top: @header-height + @header-padding-top;
}

.search {
  height: 28px;
  color: #333;
  width: 80%;
  margin: 8px 0px 8px 4%;
  font-size: 16px;
  border-radius: 15px;
  border: 1px solid #e6e6e6;
  text-align: left;
  float: left;
  > input {
    float: left;
    height: 28px;
    line-height: normal;
    color: #333;
    outline: none;
    margin-left: 5px;
    text-indent:10px;
  }
}
.icon-search {
  float: left;
  width: 28px;
  height: 28px;
  padding-left: 8px;
  margin-top: 10px;
}
.row-active {
  background-color: #cccccc;
}

.row-container {
  position: relative;
  display: block;
  margin-top: 10px;
  overflow: hidden;
  .row {
    overflow: hidden;
    display: block;
    height: @row-height;
    line-height: @row-height;
    border-bottom: @row-border;
    background-color: white;
    padding: 0 20px;
    color: black;
    font-size: 14px;
    .row-icon {
      width: @row-icon-width;
      height: @row-icon-height;
      margin-top: (@row-height - @row-icon-height)/2;
      &:first-child {
        float: left;
        margin-left: 10px;
        & + span:nth-child(2) {
          float: left;
          margin-left: 10px;
        }
      }
    }
    .row-arrow {
      float: right;
      width: @row-arrow-width;
      height: @row-arrow-height;
      margin-top: (@row-height - @row-arrow-height)/2;
      margin-right: 10px;
      & + span {
        float: left;
        margin-right: 10px;
      }
    }
    > span:first-child {
      float: left;
    }
    > span:last-child {
      float: right;
      margin-right: 10px;
    }
  }
  .row-line{
    >span{
      display: block;
      line-height:46px;
      padding-left: 15px;
    }
    .row-arrow-left {
      float: left;
      width: 20px;
      height: 20px;
      margin-top: (@row-height - 20)/2;
    }
    .row-arrow-right {
      float: right;
    }
  }
}

.btn-commit {
  display: block;
  width: 85%;
  height: 40px;
  background-color: #9D0152;
  color: white;
  line-height: 40px;
  font-size: 16px;
  margin: 40px auto;
  border-radius: 5px;
  text-align: center;
  &.disabled {
    background-color: #cccccc;
  }
}

@keyframes alertFadeIn {
  from {
    background-color: rgba(255, 255, 255, 0);
    left: 0;
    width: 100%;
  }
  to {
    background-color: rgba(255, 255, 255, 1);
    left: 10%;
    width: 80%;
  }
}

.modal {
  visibility: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  &.hide {
    visibility: hidden;
  }
  &.show {
    visibility: visible;
    animation: modalFadeIn 0.5s;
  }
}

.modal-alert {
  position: fixed;
  width: 80%;
  top: 50%;
  left: 10%;
  margin-top: -120px;
  background-color: rgba(255, 255, 255, 0.99);
  border-radius: 5px;
  text-align: center;
  &.hide {
    display: none;
  }
  &.show {
    display: block;
    animation: alertFadeIn 0.2s;
  }
}

.hasNotRead-icon {
  width: 20px;
  height: 20px;
  font-size: 12px;
  color: white;
  background: red;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
}

.shopsearch {
  height: 30px;
  // margin: 7.5px 45px 5px 40px;
  color: #333;
  font-size: 16px;
  border-radius: 4px;
  text-align: center;
  width: 70%;
  margin: 0 auto;
  margin-top: 8px;
  // border: 1px solid #e6e6e6;
  background: #f0f0f0;
  > .icon-search {
    float: left;
    width: 18px;
    height: 18px;
    margin-left: 10px;
    margin-top: 7px;
  }
  > input {
    float: left;
    height: 30px;
    line-height: normal;
    font-size: 12px;
    color: #333;
    outline: none;
    margin-left: 5px;
  }

}
